<template>
	<view class="page-container">
		<!-- 筛选区域 -->
		<view class="tech-card filter-section">
			<view class="card-title">
				<view class="title-icon">🎨</view>
				<text>课件资源管理</text>
			</view>

			<view class="filter-content">
				<view class="filter-left">
					<el-button @click="show1 = true" class="tech-button primary-button">
						<text>➕ 新增资源</text>
					</el-button>

					<view class="status-group">
						<el-radio-group v-model="params.status" size="mini" @change="getData()">
							<el-radio-button label="全部"></el-radio-button>
							<el-radio-button label="已审核"></el-radio-button>
							<el-radio-button label="未审核"></el-radio-button>
						</el-radio-group>
					</view>
				</view>

				<view class="filter-right">
					<el-input placeholder="请输入资源名称" v-model="params.searchText" @change="confirmSearch"
						class="tech-input search-input" size="small" />

					<el-switch v-model="params.isNice" active-text="精选内容" inactive-text=""
						class="tech-switch" @change="confirmSearch" />
				</view>
			</view>
		</view>

		<!-- 数据表格区域 -->
		<view class="tech-card table-section">
			<view class="card-title">
				<view class="title-icon">📊</view>
				<text>资源列表</text>
				<text class="file-count" v-if="dataList.length > 0">共 {{ maxCount }} 条数据</text>
			</view>

			<el-table :data="dataList" class="tech-table" size="small"
				:header-cell-style="{ background: '#1a1f3a', color: '#00f0ff', fontWeight: 'bold' }"
				height="calc(100vh - 280px)">
				<el-table-column type="index" label="#" width="60" align="center" />

				<el-table-column prop="number" label="编号" width="120" show-overflow-tooltip />

				<el-table-column prop="title" label="标题" width="150" show-overflow-tooltip />

				<el-table-column prop="desc" label="描述" width="180" show-overflow-tooltip>
					<template slot-scope="scope">
						<view class="text-overflow">{{scope.row.desc}}</view>
					</template>
				</el-table-column>

				<el-table-column prop="age" label="适合年龄" width="90" align="center" />

				<el-table-column prop="price" label="价格" width="70" align="center">
					<template slot-scope="scope">
						<view class="price-tag">¥{{ scope.row.price }}</view>
					</template>
				</el-table-column>

				<el-table-column prop="images" label="图片" width="100" align="center">
					<template slot-scope="scope">
						<el-image class="preview-image" :src="scope.row.images[0]"
							:preview-src-list="scope.row.images" fit="cover" />
					</template>
				</el-table-column>

				<el-table-column prop="downLoadNum" label="下载次数" width="90" align="center">
					<template slot-scope="scope">
						<view class="download-count">{{ scope.row.downLoadNum || 0 }}</view>
					</template>
				</el-table-column>

				<el-table-column prop="typeDesc" label="主题" width="100" align="center" />

				<el-table-column prop="classDesc" label="教案工具" width="150" show-overflow-tooltip />

				<el-table-column prop="createdAt" label="创建日期" width="160" align="center" />

				<el-table-column fixed="right" label="操作" width="120" align="center">
					<template slot-scope="scope">
						<el-button type="text" class="action-button" @click="editThis(scope.row)">
							编辑
						</el-button>
						<el-button type="text" class="action-button delete-button" @click="deleteThis(scope.row)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<view class="pagination-wrapper">
				<el-pagination
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
					:current-page="params.pageNum"
					:page-sizes="[20, 40, 60, 80, 100]"
					:page-size="params.pageSize"
					:total="maxCount"
					layout="total, sizes, prev, pager, next, jumper"
					background>
				</el-pagination>
			</view>
		</view>

		<courseEdit v-if="show1" @save="show1 = false,chooseItem='',getData()" :detail="chooseItem"
			@close="show1 = false,chooseItem = ''" :typeDesc="params.typeDesc" />
	</view>
</template>

<script>
	import courseEdit from '@/components/courseEdit'
	let that
	export default {
		components: {
			courseEdit
		},
		data() {
			return {
				fileTypeOptions: [{
					value: "",
					label: "全部"
				},{
					value: "课件",
					label: "课件"
				}, {
					value: "课程",
					label: "课程"
				}, {
					value: "素材",
					label: "素材"
				}],

				show1: false,
				chooseItem: '',
				dataList: [],
				maxCount: 1,
				maxPage: 1,

				params: {
					pageSize: 20,
					pageNum: 1,
					fileType: '课件',
					searchText: '',
					isNice: false,
					status: '全部',
				}
			}
		},

		onLoad() {
			that = this
			that.getData()
			
			that.$http.Post("admin/images/del", {
			}, "加载中...")
			
			that.$http.Post("admin/test", {
			}, "加载中...")
		},

		methods: {
			deleteThis(item) {
				uni.showModal({
					content: "是否删除此条目",
					success(res) {
						if (res.confirm) {
							that.$http.Post("admin/artPPT/remove", {
								objectId: item.objectId
							}, "加载中...").then(res => {
								that.getData()
							})
						}
					}
				})
			},

			confirmSearch() {
				that.dataList = []
				that.params.pageNum = 1
				that.getData()
			},

			editThis(item) {
				this.chooseItem = item
				this.show1 = true
			},

			handleCurrentChange(value) {
				that.params.pageNum = value
				that.getData()
			},

			handleSizeChange(value) {
				that.params.pageSize = value
				that.params.pageNum = 1
				that.getData()
			},

			getData() {
				this.$http.Post("admin/artPPT/list", that.params, "加载中...").then(res => {
					for (let item of res.data) {
						item.typeId = item.TypeId
					}
					this.dataList = res.data
					that.maxCount = res.maxCount
					that.maxPage = res.maxPage
				})
			}
		}
	}
</script>

<style scoped>
/* ==================== 全局容器 ==================== */
.page-container {
	min-height: 100vh;
	padding: 16px;
	background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1729 100%);
	font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==================== 科技卡片 ==================== */
.tech-card {
	background: rgba(26, 31, 58, 0.6);
	backdrop-filter: blur(10px);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
	border: 1px solid rgba(0, 240, 255, 0.2);
	box-shadow:
		0 8px 32px rgba(0, 240, 255, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.tech-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #00f0ff, transparent);
	animation: scan 3s infinite;
}

@keyframes scan {
	0%, 100% {
		left: -100%;
	}
	50% {
		left: 100%;
	}
}

.tech-card:hover {
	border-color: rgba(0, 240, 255, 0.4);
}

/* ==================== 卡片标题 ==================== */
.card-title {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	color: #00f0ff;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(0, 240, 255, 0.2);
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.title-icon {
	margin-right: 6px;
	font-size: 18px;
	filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
}

.file-count {
	margin-left: auto;
	font-size: 12px;
	color: #7f8ea3;
	font-weight: normal;
	background: rgba(0, 240, 255, 0.1);
	padding: 2px 10px;
	border-radius: 10px;
	border: 1px solid rgba(0, 240, 255, 0.2);
}

/* ==================== 筛选区域 ==================== */
.filter-content {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}

.filter-left {
	display: flex;
	gap: 16px;
	align-items: center;
	flex: 1;
}

.filter-right {
	display: flex;
	gap: 12px;
	align-items: center;
}

.status-group {
	display: flex;
	align-items: center;
}

/* 单选按钮组样式 */
.status-group >>> .el-radio-group {
	display: flex;
	gap: 0;
}

.status-group >>> .el-radio-button__inner {
	background: rgba(10, 14, 39, 0.6) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	color: #b8c5d6 !important;
	padding: 8px 16px;
	font-size: 13px;
	transition: all 0.3s ease;
	border-right: none !important;
}

.status-group >>> .el-radio-button:first-child .el-radio-button__inner {
	border-radius: 6px 0 0 6px;
}

.status-group >>> .el-radio-button:last-child .el-radio-button__inner {
	border-radius: 0 6px 6px 0;
	border-right: 1px solid rgba(0, 240, 255, 0.3) !important;
}

.status-group >>> .el-radio-button__inner:hover {
	color: #00f0ff !important;
	border-color: rgba(0, 240, 255, 0.5) !important;
}

.status-group >>> .el-radio-button.is-active .el-radio-button__inner {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(0, 153, 204, 0.3) 100%) !important;
	color: #00f0ff !important;
	border-color: #00f0ff !important;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
	font-weight: 600;
}

.status-group >>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
	box-shadow: none !important;
}

.search-input {
	width: 300px;
}

/* ==================== 科技输入框 ==================== */
.tech-input >>> .el-input__inner {
	background: rgba(10, 14, 39, 0.6) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	color: #e0e6ed !important;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
	height: 36px;
	transition: all 0.3s ease;
}

.tech-input >>> .el-input__inner:hover {
	border-color: rgba(0, 240, 255, 0.5) !important;
}

.tech-input >>> .el-input__inner:focus {
	border-color: #00f0ff !important;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
	background: rgba(10, 14, 39, 0.8) !important;
}

.tech-input >>> .el-input__inner::placeholder {
	color: #4a5568;
}

/* ==================== 科技开关 ==================== */
.tech-switch >>> .el-switch__core {
	background: rgba(10, 14, 39, 0.6) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	height: 22px;
	transition: all 0.3s ease;
}

.tech-switch >>> .el-switch__core::after {
	background: #7f8ea3;
	width: 16px;
	height: 16px;
	top: 2px;
}

.tech-switch.is-checked >>> .el-switch__core {
	background: linear-gradient(135deg, #00f0ff 0%, #0099cc 100%) !important;
	border-color: #00f0ff !important;
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

.tech-switch.is-checked >>> .el-switch__core::after {
	background: #0a0e27;
}

.tech-switch >>> .el-switch__label {
	color: #b8c5d6;
	font-size: 13px;
}

.tech-switch >>> .el-switch__label.is-active {
	color: #00f0ff;
}

/* ==================== 科技按钮 ==================== */
.tech-button {
	padding: 8px 20px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.3px;
	transition: all 0.3s ease !important;
	border: none !important;
	position: relative;
	overflow: hidden;
	height: 36px;
}

.tech-button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.tech-button:hover::before {
	/* 动画已移除 */
}

.primary-button {
	background: linear-gradient(135deg, #00f0ff 0%, #0099cc 100%) !important;
	color: #0a0e27 !important;
	box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
}

.primary-button:hover {
	/* 动画已移除 */
}

/* ==================== 表格区域 ==================== */
.table-section {
	height: calc(100vh - 200px);
	display: flex;
	flex-direction: column;
}

/* ==================== 表格样式 ==================== */
.tech-table {
	width: 100%;
	flex: 1;
}

.tech-table >>> .el-table {
	background: transparent !important;
	color: #e0e6ed;
}

.tech-table >>> .el-table::before {
	background: transparent !important;
}

.tech-table >>> .el-table th,
.tech-table >>> .el-table tr {
	background: transparent !important;
}

.tech-table >>> .el-table td,
.tech-table >>> .el-table th.is-leaf {
	border-bottom: 1px solid rgba(0, 240, 255, 0.1) !important;
}

.tech-table >>> .el-table td {
	color: #b8c5d6 !important;
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
}

.tech-table >>> .el-table__body tr {
	background: rgba(10, 14, 39, 0.3) !important;
	transition: all 0.3s ease;
	border-left: 3px solid transparent;
}

.tech-table >>> .el-table__body tr:hover {
	background: linear-gradient(90deg,
		rgba(0, 240, 255, 0.2) 0%,
		rgba(0, 240, 255, 0.15) 50%,
		rgba(0, 240, 255, 0.05) 100%) !important;
	border-left-color: #00f0ff;
}

.tech-table >>> .el-table__body tr:hover td {
	color: #e0e6ed !important;
}

.tech-table >>> .el-table__body-wrapper {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 240, 255, 0.3) rgba(10, 14, 39, 0.5);
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar-track {
	background: rgba(10, 14, 39, 0.5);
	border-radius: 4px;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
	background: rgba(0, 240, 255, 0.3);
	border-radius: 4px;
	transition: background 0.3s;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 240, 255, 0.5);
}

/* ==================== 文本溢出 ==================== */
.text-overflow {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==================== 价格标签 ==================== */
.price-tag {
	color: #00ff88;
	font-weight: 600;
	font-size: 13px;
	text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

/* ==================== 下载次数 ==================== */
.download-count {
	color: #ffaa00;
	font-weight: 600;
	font-size: 13px;
}

/* ==================== 预览图片 ==================== */
.preview-image {
	width: 50px !important;
	height: 50px !important;
	border-radius: 6px;
	border: 2px solid rgba(0, 240, 255, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
	object-fit: cover;
	position: relative;
}

.preview-image:hover {
	border-color: #00f0ff;
}

/* ==================== 操作按钮 ==================== */
.action-button {
	color: #00f0ff !important;
	font-weight: 600 !important;
	padding: 4px 8px !important;
	transition: all 0.3s ease !important;
	position: relative;
	background: transparent !important;
	border-radius: 4px;
	font-size: 13px !important;
}

.action-button::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	background: rgba(0, 240, 255, 0.2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.4s ease, height 0.4s ease;
}

.action-button:hover {
	background: rgba(0, 240, 255, 0.1) !important;
}

.action-button:hover::before {
	/* 动画已移除 */
}

.delete-button:hover {
	color: #ff4757 !important;
	background: rgba(255, 71, 87, 0.1) !important;
}

/* ==================== 分页器 ==================== */
.pagination-wrapper {
	display: flex;
	justify-content: flex-end;
	padding: 16px 0 0 0;
	margin-top: 12px;
	border-top: 1px solid rgba(0, 240, 255, 0.1);
}

.pagination-wrapper >>> .el-pagination {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pagination-wrapper >>> .el-pagination.is-background .btn-next,
.pagination-wrapper >>> .el-pagination.is-background .btn-prev,
.pagination-wrapper >>> .el-pagination.is-background .el-pager li {
	background: rgba(10, 14, 39, 0.6) !important;
	color: #b8c5d6 !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	border-radius: 6px;
	margin: 0 2px;
	transition: all 0.3s ease;
}

.pagination-wrapper >>> .el-pagination.is-background .el-pager li:hover,
.pagination-wrapper >>> .el-pagination.is-background .btn-next:hover,
.pagination-wrapper >>> .el-pagination.is-background .btn-prev:hover {
	color: #00f0ff !important;
	border-color: rgba(0, 240, 255, 0.5) !important;
}

.pagination-wrapper >>> .el-pagination.is-background .el-pager li.active {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.3) 0%, rgba(0, 153, 204, 0.3) 100%) !important;
	color: #00f0ff !important;
	border-color: #00f0ff !important;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
	font-weight: 600;
}

.pagination-wrapper >>> .el-pagination__total,
.pagination-wrapper >>> .el-pagination__jump {
	color: #b8c5d6 !important;
}

.pagination-wrapper >>> .el-pagination__sizes .el-input .el-input__inner {
	background: rgba(10, 14, 39, 0.6) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	color: #e0e6ed !important;
	border-radius: 6px;
}

.pagination-wrapper >>> .el-pagination__sizes .el-input .el-input__inner:hover {
	border-color: rgba(0, 240, 255, 0.5) !important;
}

.pagination-wrapper >>> .el-input__inner {
	background: rgba(10, 14, 39, 0.6) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	color: #e0e6ed !important;
	border-radius: 6px;
}

/* ==================== 固定列样式 ==================== */
.tech-table >>> .el-table__fixed,
.tech-table >>> .el-table__fixed-right {
	background: rgba(10, 14, 39, 0.95) !important;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.tech-table >>> .el-table__fixed-right::before,
.tech-table >>> .el-table__fixed::before {
	background: transparent !important;
}

/* ==================== 下拉菜单深色样式 ==================== */
.el-select-dropdown {
	background: rgba(26, 31, 58, 0.95) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.el-select-dropdown__item {
	color: #e0e6ed !important;
	background: transparent !important;
}

.el-select-dropdown__item:hover {
	background: rgba(0, 240, 255, 0.2) !important;
}

.el-select-dropdown__item.selected {
	color: #00f0ff !important;
	font-weight: 600;
}

/* ==================== 响应式 ==================== */
@media (max-width: 1400px) {
	.filter-content {
		flex-wrap: wrap;
	}

	.filter-left,
	.filter-right {
		flex: 100%;
	}
}

@media (max-width: 768px) {
	.page-container {
		padding: 12px;
	}

	.tech-card {
		padding: 12px;
		margin-bottom: 12px;
	}

	.filter-content {
		flex-direction: column;
	}

	.search-input {
		width: 100%;
	}
}
</style>
